<template>

  <Panel style="padding: 20px;margin-bottom: 20px;min-height: 450px;">
    <el-form :inline="true" ref="form" :model="query" label-width="80px">
      <el-form-item label="订单号">
        <el-input v-model="query.order_number"></el-input>
      </el-form-item>
      <el-form-item label="下单用户">
        <el-input v-model="query.username"></el-input>
      </el-form-item>
      <el-form-item label="邀请用户">
        <el-input v-model="query.invite_username"></el-input>
      </el-form-item>
      <el-form-item label="课程ID">
        <el-input v-model="query.course_id"></el-input>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="time_range"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-button type="primary" @click="getOrderList">查询</el-button>
    </el-form>
    <div style="font-size:16px; color: red">查询订单总数：{{total}}  总价：{{totalprice}}</div>
    <el-pagination
      background
      class="page"
      layout="prev, pager, next"
      @current-change="currentChange"
      :page-size="limit"
      :total="total">
    </el-pagination>

    <el-table
      :data="myOrderList"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="owner"
        label="用户ID" width="80">
      </el-table-column>
      <el-table-column
        prop="order_number"
        label="订单号" >
      </el-table-column>
      <el-table-column
        prop="msg"
        label="章节"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="price"
        label="实付金额">
      </el-table-column>
      <el-table-column
        prop="buy_time"
        label="付款时间" show-overflow-tooltip>
        <template slot-scope="props">
            {{props.row.buy_time | localtime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="is_finish"
        label="状态">
        <template slot-scope="props">
          <el-tag v-if="props.row.is_finish" type="success">已完成</el-tag>
          <el-tag v-if="!props.row.is_finish" type="danger">未完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="invite_code"
        label="邀请码" width="100px">
      </el-table-column>
    </el-table>

  </Panel>
</template>

<script>
  import api from '../../api.js'
  import { mapGetters } from 'vuex'
  // import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'
  const limit = 50

  export default {
    name: 'CourseDetail',
    data () {
      return {
        myOrderList: null,
        order_number: null,
        username: null,
        invite_username: null,
        query: {},
        limit: limit,
        total: 0,
        page: 1,
        offset: 0,
        time_range: null,
        totalprice: 0.0
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.getOrderList()
      },
      getOrderList (page = 1) {
        this.offset = (page - 1) * this.limit
        if (this.time_range) {
          this.query.start_time = this.time_range[0]
          this.query.end_time = this.time_range[1]
        }
        // this.changeRoute()
        console.log(this.query)
        api['getOrderList'](this.offset, this.limit, this.query).then((res) => {
          this.myOrderList = res.data.data.results
          this.total = res.data.data.total
          this.totalprice = res.data.data.totalprice.toFixed(2)
          console.log(this.myOrderList)
        }).catch()
      },
      currentChange (currpage) {
        this.page = currpage
        this.getOrderList(currpage)
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    },
    watch: {
      'keyword' () {
        this.currentChange()
      }
    }
  }
</script>



<style lang="less" scoped>
 .course_item {
    width: 270px;
    float: left;
    background: #fff;
    margin-bottom: 24px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d7d7d7;
    position: relative;
    margin-right: 5px;
  }

  .course_image {
    height: 180px;
    width: 100%;
  }

  .course_title {
    font-weight: 600;
    font-size: 20px;
  }
  
  .course_button {
    float: right;
    padding: 8px; 
    background-color:rgb(91, 177, 113);
    color: white;
  }

  .page {
    align-self: center;
    size: 100;
  }
  
</style>
